<template>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="echart-line" style="width: 100%;height: 600px"></div>
</template>
<script>

import * as echarts from 'echarts'

export default {
    methods: {
        initChart(moduleNames) {

            let chartDom = document.getElementById('echart-line');
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '折线图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: moduleNames
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                // x轴
                xAxis: {
                    name: '月份',
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月', '12月', '1月', '2月']
                },
                // y轴
                yAxis: {
                    type: 'value',
                    name: '数量',
                },
                series: [
                    {
                        name: '组织人事',
                        type: 'line',
                        data: [67, 99, 86, 47, 27, 58, 73, 131, 80, 84, 46, 28,70,70]
                    },
                    {
                        name: '考勤管理',
                        type: 'line',
                        data: [183, 134, 216, 125, 96, 92, 129, 119, 96, 56, 52, 85,107,168]
                    },
                    {
                        name: '招聘管理',
                        type: 'line',
                        data: [19, 51, 82, 27, 17, 51, 55, 64, 60, 36,41, 45,49,117]
                    },
                    {
                        name: '绩效管理',
                        type: 'line',
                        data: [164, 72, 109, 67, 35, 45, 37, 45, 60, 31, 18, 20,24,61]
                    },
                    {
                        name: '薪酬管理',
                        type: 'line',
                        data: [7, 6, 6, 8, 8, 3, 1, 1, 4, 2, 4, 2,0,0]
                    },
                    {
                        name: '培训管理',
                        type: 'line',
                        data: [32, 30, 53, 45, 20, 18, 36, 41, 46, 14, 26, 25,24,43]
                    },
                    {
                        name: '食堂管理',
                        type: 'line',
                        data: [51, 12, 22, 9, 10, 7, 9, 13, 6, 10,26, 12, 7,15]
                    },
                    {
                        name: '系统管理',
                        type: 'line',
                        data: [27, 28, 28, 12, 12, 14, 18, 33, 13, 4, 0, 0, 6,0]
                    },
                    {
                        name: '员工问询',
                        type: 'line',
                        data: [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0,0]
                    }
                ]
            };
            option && myChart.setOption(option);
        },

    }

}
</script>
